<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <link href="/resources/css/bootstrap.css" rel="stylesheet">
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
		.bg{ width: 100%; height:100%; position: absolute; top:0; left:0; bottom:0; right:0; z-index: 5; background-color: #353535; opacity:.65;}
		#back_bg{width:100%;height:100%;overflow:hidden;z-index: -1; position: relative;background-color: #353535; pointer-event: none;}
		#back_bg .item{width:100%; height:100%; text-align:center; display: none;}
		#back_bg .info{position:absolute;bottom:15px;right:15px;color:#fff;text-align:right;font-size:12px;display:none;}
		#back_bg .info > p{margin-bottom:5px;}
		#back_bg img{width:auto;height:100%;}
		.introduce-step1-background{
			background: #fff;
			width: 100%;
			height: 100%;
			position: fixed;
			z-index: 10;
		}
		.introduce-step1{
			width: 100%;
			height: 100px;
			text-align: center;
			position: relative;
			top: 45%;
			padding: 0 35px;
			transform: translate(0, -70%);
			-webkit-transform: translate(0, -70%);
			-webkit-transition:all 0.9s ease-in-out;
			-moz-transition:all 0.9s ease-in-out;
			-o-transition:all 0.9s ease-in-out;
			transition:all 0.9s ease-in-out;
		}
		.introduce-step1.active{
			top: 0;
		}
		.introduce-step2{
			width: 100%;
			height: 100%;
			text-align: center;
			position: relative;
			opacity: 0;
			display: none;
			color: #fff;
			padding-top: 25px;
			-webkit-transition:all 0.5s ease-in-out;
			-moz-transition:all 0.5s ease-in-out;
			-o-transition:all 0.5s ease-in-out;
			transition:all 0.5s ease-in-out;
		}
		.introduce-step2.active{
			opacity: 1;
		}
		.content{width:100%;height:100%;z-index:20;position:absolute;top:0;}
		.logo{
			margin-top:55px;width:100%;text-align:center;
			-webkit-transition:all 0.9s ease-in-out;
			-moz-transition:all 0.9s ease-in-out;
			-o-transition:all 0.9s ease-in-out;
			transition:all 0.9s ease-in-out;
		}
		
		.footer{width:100%;position:absolute;bottom:30px;text-align:center;padding:0 17px;}
		.form-input{border:0;border-radius:0;background-color: rgba(255,255,255,0.85);color: #303030;padding:8px 12px;outline:none;width:100%;}
		.sns-login > div {display:inline-block;cursor:pointer;}
		.sns-btn{width:30px;height:30px;border:0;border-radius:0;text-align:center;overflow:hidden;}
		.introduce { 
			padding: 0 50px; color: #fff; text-align: center; margin-top: 15px; font-size: 17px;
			opacity : 0;
			-webkit-transition:all 0.9s ease-in-out;
			-moz-transition:all 0.9s ease-in-out;
			-o-transition:all 0.9s ease-in-out;
			transition:all 0.9s ease-in-out;
		}
		.introduce.active { background: #fff; position: fixed; top:0; left:0; width: 100%; height: 100%; z-index:9999; margin-top: 0!important; color: #5a5a5a; }
		.link_btn{ color: #151515; padding: 12px 0; display: block; background-color: rgba(255,255,255,0.4); border: 0; border-radius: 6px; margin-bottom: 8px; text-decoration: none!important; }
    </style>
<script src="/resources/js/kakao.min.js"></script>
<script src="/resources/js/jquery-1.11.0.js"></script>
<script>
	var idx = 0;
	window.fbAsyncInit = function() {
		FB.init({appId: '1427921877464450', status: true, cookie: true,xfbml: true});
	};
	(function(d){
	     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
	     if (d.getElementById(id)) return;
	     js = d.createElement('script'); js.id = id; js.async = true;
	     js.src = "//connect.facebook.net/ko_KR/all.js";
	     ref.parentNode.insertBefore(js, ref);
	}(document));
	Kakao.init('c5f8d437c21941d011d7e542f02b91dc');
	
	
	$(function(){
		setTimeout(function(){
			$(".introduce-step1").addClass("active");
			$(".introduce-step1-background").fadeOut(1200);
			$(".introduce-step2").show();
			setTimeout(function(){
				$(".introduce-step1").hide();
			},800);
	  		setTimeout(function(){
	  			$(".introduce-step2").addClass("active");
	  		},1000);
	  	},2500);
	});
	
	function loadEvent(){
		$.ajax({
			type : "post"
		    , url : "/loadRandomPost?size=20"
		    , dataType : "json"
		    , timeout : 5000
		    , error : function(){
		    	
		    }
		    , success : function(response) {
		    	var html = "";
		    	for(var i=0;i<response.length;i++){
		   			html += "<div class='item'><img src='/resources/upload/post/"+response[i].image1+"'><div class='info'><p>"+response[i].title+"</p><p>@"+response[i].member_id+" 님의 사진</p><p>"+response[i].create_date.substring(0,10)+"</p></div></div>";
		   		}
		    	$("#back_bg").html(html);
		    	$("#back_bg > div:first").fadeIn();
		    	//totalSize = $("#back_bg > div").size();
		    }
		});
	}
	
	function login(){
		if($("#loginUser").val() == ""){
			alert('아이디 또는 이메일을 입력해 주세요');
			return false;
		}
		if($("#loginPassword").val() == ""){
			alert('비밀번호를 입력해 주세요');
			return false;
		}
		var data = $("#login-form").serialize();
		$.ajax({
		    type : "POST"
		    , url : "/login"
		    , data : data
		    , dataType : "text"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	alert("서버문제로 로그인을 할 수 없습니다");
		    }
		    , success : function(response) {
		    	if(response == "true"){
		    		location.href= "/";
		    	}else{
		    		alertShow("danger","사용자 정보가 올바르지 않습니다", 2000);
		    	}
		    }
		    , beforeSend: function() {
		    	$("#loginBtn").html("<img src='/resources/img/primary-btn-loading.gif'>");
		    }
		    , complete: function() {
		    	$("#loginBtn").html("로그인");
		    }
		});
	}
	
	function fb_login(){
		FB.login(function(response) {
			if (response.status == 'connected') {
	        	FB.api('/me', function(user) {
	                if (user) {
	                	var data = 'fb_name='+user.name+'&fb_id='+user.id+'&fb_email='+user.email+'&fb_gender='+user.gender;
	                	$.ajax({
	                		type : "POST"
	            		    , url : "/fb_getMember"
	            		    , data : data
	            		    , dataType : "text"
	            		    , timeout : 5000
	            		    , error : function(request, status, error) {
	            		    	alertShow("danger","서버문제로 로그인할 수 없습니다", 2000);
	            		    }
	            		    , success : function(response) {
	            		    	if(response == "login"){
	            		    		location.href= "/";
	            		    	}else if(response == "sign"){
	            		    		location.href= '/start_guide';
	            		    	}else{
	            		    		alertShow("danger","로그인할 수 없습니다", 2000);
	            		    	}
	            		    }
	            		    , beforeSend: function() {
	            		    	
	            		    }
	            		    , complete: function() {
	            		    	
	            		    }
	            		});
	                }else{
	                	alertShow("warning","페이스북 로그인에 실패했습니다", 2000);
	                }
	        	});
	        }else if (response.status == 'not_authorized') {
	        	alertShow("warning","페이스북 로그인에 실패했습니다", 2000);
	        }else{
	        	alertShow("warning","페이스북 로그인에 실패했습니다", 2000);
	        }
		}, {scope: 'email'});
	}
	
	function loginWithKakao() {
	    Kakao.Auth.login({
	    	success: function(authObj) {
	    		Kakao.API.request({
	    	        url: '/v1/user/me',
	    	        success: function(res) {
	    	        	var data = 'kakao-idx='+res.id+'&kakao-nickname='+res.properties.nickname+'&kakao-profile_image='+res.properties.profile_image;
	    	        	$.ajax({
	                		type : "POST"
	            		    , url : "/kakaoLogin"
	            		    , data : data
	            		    , dataType : "text"
	            		    , timeout : 5000
	            		    , error : function(request, status, error) {
	            		    	alertShow("danger","서버문제로 로그인할 수 없습니다", 2000);
	            		    }
	            		    , success : function(response) {
	            		    	if(response == "login"){
	            		    		location.href= "/";
	            		    	}else if(response == "sign"){
	            		    		location.href= '/start_guide';
	            		    	}else{
	            		    		alertShow("danger","로그인할 수 없습니다", 2000);
	            		    	}
	            		    }
	            		    , beforeSend: function() {
	            		    	
	            		    }
	            		    , complete: function() {
	            		    	
	            		    }
	            		});
	    	        }
	    	    });
	    	}
	    });
	};
	
	function twitterCall(response){
  		if(response == "sign"){
  			location.href= "/start_guide";
  		}else{
  			location.href= "/";
  		}
  	}
  	
  	function instagramCall(response){
  		if(response == "sign"){
  			location.href= "/start_guide";
  		}else{
  			location.href= "/";
  		}
  	}
  	
  	function init(){
  		$("#back_bg").css("height",$(window).innerHeight()+"px");
		loadEvent();
		setInterval(function(){
			$("#back_bg > div").eq(idx).fadeOut(500,function(){
				++idx;
				if(idx==20){ idx=0; }
				$("#back_bg > div").eq(idx).fadeIn(500);
			});
		}, 7000);
  	}
  	
</script>
</head>
<body onload="init();">
<div id="fb-root"></div>
<div class="introduce-step1-background"></div>
<div class="bg"></div>
<div id="back_bg"></div>

<div class="content">
	<div class="introduce-step1">
		<img src="/resources/img/m_home_logo.png" width="160" height="55" style="margin-bottom:25px;">
		<p style="font-size: 20px;color:#282828;">Faeple에 가입해서 내가 원하는 스타일을 찾아보고, 사람들과 패션을 공유하면서 소통을 나누어 보세요.</p>
	</div>
	<div class="introduce-step2">
		<img src="/resources/img/home_logo.png" width="140" height="53">
<!-- 		<p style="padding:0 35px;">Faeple에 가입해서 내가 원하는 스타일을 찾아보고, 사람들과 패션을 공유하면서 소통을 나누어 보세요.</p> -->
		<div class="footer">
			<a href="/signup" class="link_btn">가입하기</a>
			<a href="/login" class="link_btn">로그인</a>
		</div>
	</div>
<!-- 	<div class="logo"><img src="/resources/img/home_logo.png" width="140" height="53"></div> -->
<!-- 	<div class="introduce active">Faeple에 가입해서 내가 원하는 스타일을 찾아보고, 사람들과 패션을 공유하면서 소통을 나누어 보세요.</div> -->
	<!-- <div class="footer">
		<a href="/signup" class="link_btn">가입하기</a>
		<a href="/login" class="link_btn">로그인</a> -->
		<!-- <form id="login-form">
		<div class="sns-login" style="text-align:left;color:#fff;">
			SNS 로그인 : 
			<div onclick="fb_login();"><img src="/resources/img/icon/share-facebook-icon.png" width="30px" height="30px"></div>
			<div onclick="window.open('https://api.instagram.com/oauth/authorize/?client_id=1211a537d5c444c8a06c8d73bdc93bc6&redirect_uri=http://faeple.com/connectInstgram&response_type=code','Instagram','resizable=no width=500 height=380 scrollbars=yes')"><img src="/resources/img/instagram-icon.png" width="30px" height="30px"></div>
			<div onclick="loginWithKakao();"><img src="/resources/img/icon/share-kakao-icon.png" width="30px" height="30px"></div>
			<div onclick="window.open('/twitterLogin','twitter','resizable=no width=720 height=430')"><img src="/resources/img/icon/share-twitter-icon.png" width="30px" height="30px"></div>
		</div>
		<div style="margin-top:5px;">
			<input type="text" class="form-input" id="loginUser" name="loginUser" placeholder="아이디 또는 이메일" style="margin-bottom:5px;" tabindex="1">
			<input type="password" class="form-input" id="loginPassword" name="loginPassword" placeholder="비밀번호" tabindex="2" onkeypress="if (event.keyCode == 13) { login(); }">
		</div>
		<div style="margin-top:5px;width:100%;text-align:left;">
			<label style="color:#fff;"><input type="checkbox" id="autologin" name="autologin" style="border-color:#fff;"> 자동로그인</label>
		</div>
		<div style="margin-top:10px;width:100%;text-align:left;">
			<button type="button" onclick="location.href='/signup';" class="btn" style="background-color:#FFC346;border-radius:0;width:75px;height:34px;">회원가입</button>
			<button type="button" onclick="login();" id="loginBtn" class="btn" style="background-color:#4A9DDB;border-radius:0;color:#fff;width:75px;height:34px;">로그인</button>
		</div>
		<div style="margin-top:10px;width:100%;text-align:left;">
			<a href="/mobile/recovery" style="text-decoration:none;color:#fff;font-size:13px;">비밀번호를 잊어버리셨나요?</a>
		</div>
		</form> -->
<!-- 	</div> -->
</div>
</body>
</html>